<template>
  <view class="search-wrap">
    <!-- #ifdef H5 -->
    <van-nav-bar @click-left="onClickLeft" left-arrow title="搜索电站"></van-nav-bar>
    <!-- #endif -->
    <!-- 导航栏 -->
    <view class="input-wrap">
      <view class="input-box">
        <input
          class="input-search"
          placeholder-class="placeholder"
          v-model="chooseData.stationName"
          placeholder="请输入电站名称/目的地进行搜索"
          maxlength="32"
          confirm-type="search"
          @confirm="search" />
        <view class="icon-wrap" @tap.stop="search">
          <view class="iconfont icon-search"></view>
        </view>
      </view>
    </view>
    <!-- 历史记录 -->
    <view v-if="!stationObj.isShow" class="history-wrap">
      <view class="title-wrap">
        <view>搜索历史</view>
        <view class="iconfont icon-delete" @tap="tapDelete"></view>
      </view>
      <view class="item-wrap">
        <view
          class="item text-overflow"
          v-for="(item, index) in stationObj.searchArr"
          :key="index"
          @tap="tapItem(item)">
          {{ item }}
        </view>
      </view>
    </view>
    <!-- 电站列表 -->
    <view v-if="stationObj.isShow" class="list-scroll" :style="listScrollH5">
      <view class="station-destination">
        <view class="text-title">
          “
          <text class="text text-overflow">{{ stationObj.searchStr }}</text>
          ”相关目的
        </view>
        <view class="list-wrap">
          <view
            v-for="(item, index) in stationObj.destinationLimitList"
            :key="index"
            @tap="tapStationMap(item)"
            :class="[
              'list-wrap-item',
              stationObj.destinationLimitList.length === stationObj.destinationList.length
                ? 'list-wrap-item-noborder'
                : '',
            ]">
            <view class="list-wrap-flex">
              <view class="list-wrap-item-title">{{ item.title }}</view>
              <view class="list-wrap-item-des">附近站点</view>
            </view>
            <view class="list-wrap-flex">
              <view class="list-wrap-item-adr">{{ item.address }}</view>
              <view class="list-wrap-item-dis">
                {{ item._distance ? `${(item._distance / 1000).toFixed(1)}km` : '--' }}
              </view>
            </view>
          </view>
          <view
            v-if="
              stationObj.destinationList.length > 5 &&
              stationObj.destinationLimitList.length !== stationObj.destinationList.length
            "
            @tap="moreDestination"
            class="list-wrap-more">
            查看更多
            <view class="iconfont icon-arrow-right"></view>
          </view>
          <view v-if="stationObj.destinationList.length === 0" class="no-data">
            <view class="img"></view>
            <view class="text">无匹配的结果</view>
          </view>
        </view>
      </view>
      <view class="station-destination station-list">
        <view class="text-title">
          “
          <text class="text text-overflow">{{ stationObj.searchStr }}</text>
          ”相关站点
        </view>

        <view class="list-wrap">
          <view
            v-for="(item, index) in stationObj.limitList"
            :key="index"
            @tap="tapDetails(item)"
            :class="[
              'list-wrap-item',
              stationObj.limitList.length === stationObj.list.length
                ? 'list-wrap-item-noborder'
                : '',
            ]">
            <view class="list-wrap-flex">
              <view class="list-wrap-item-title">{{ item.stationName }}</view>
              <view class="list-wrap-item-des">查看站点</view>
            </view>
            <view class="list-wrap-flex">
              <view class="list-wrap-item-adr">{{ item.areaCodeName }}{{ item.address }}</view>
              <view class="list-wrap-item-dis">
                {{ item.distance ? `${(item.distance / 1000).toFixed(1)}km` : '--' }}
              </view>
            </view>
          </view>
          <view
            v-if="
              stationObj.list.length > 5 && stationObj.limitList.length !== stationObj.list.length
            "
            @tap="moreStation"
            class="list-wrap-more">
            查看更多
            <view class="iconfont icon-arrow-right"></view>
          </view>
          <view v-if="stationObj.list.length === 0" class="no-data">
            <view class="img"></view>
            <view class="text">无匹配的结果</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {
  setSearchData,
  getSearchData,
  removeSearchData,
  getSystemInfo,
  systemInfo,
  setToastInstance,
} from '@mixins/info';
import { queryStationList } from '@/service/apis/station';
import { getLocationInfo, searchKeyword, setSearch } from '@/utils/location';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});

const $toast: any = inject('$Toast');

const info = getLocationInfo();
const chooseData = reactive({
  userLng: info.lng,
  userLat: info.lat,
  stationName: '',
});
const stationObj = reactive({
  isShow: false,
  list: [] as any,
  limitList: [] as any,
  destinationList: [] as any,
  destinationLimitList: [] as any,
  searchStr: '',
  searchArr: getSearchData(),
  number: 0,
});

const listScrollH5 = computed(() => {
  // #ifdef H5
  return `height: calc(100vh - 56px - ${getSystemInfo().navHeight}px - ${
    getSystemInfo().safeBottom
  }px)`;
  // #endif
  return '';
});

const search = () => {
  if (!chooseData.stationName) {
    $toast('请输入筛选条件');
    return;
  }
  stationObj.number = 0;
  getSearchKeyword();
  getData();
};

// 获取目的地列表
const getSearchKeyword = () => {
  searchKeyword({
    keyword: chooseData.stationName,
    userLng: chooseData.userLng,
    userLat: chooseData.userLat,
  })
    .then((res: any) => {
      console.log('key----------', res);
      stationObj.number++;
      console.log('object', res);
      // stationObj.isShow = true;
      stationObj.destinationList = res;
      stationObj.destinationLimitList = res.slice(0, 5);
    })
    .catch(() => {
      stationObj.number++;
      stationObj.destinationList = [];
      stationObj.destinationLimitList = [];
    });
};

const moreDestination = () => {
  stationObj.destinationLimitList = stationObj.destinationList;
};

const moreStation = () => {
  stationObj.limitList = stationObj.list;
};

// 获取数据
const getData = () => {
  stationObj.searchStr = chooseData.stationName;
  setSearchData(stationObj.searchStr);
  queryStationList(chooseData, { pageNum: 1, pageSize: 10 })
    .then((res: any) => {
      stationObj.number++;
      stationObj.list = res.dataList;
      stationObj.limitList = res.dataList.slice(0, 5);
    })
    .catch(() => {
      stationObj.number++;
      stationObj.list = [];
      stationObj.limitList = [];
    });
};

watch(
  () => stationObj.number,
  (newVal, oldVal) => {
    console.log(newVal);
    if (newVal === 2) {
      stationObj.isShow = true;
    }
  }
);

const tapItem = (item: string) => {
  chooseData.stationName = item;
  stationObj.number = 0;
  getSearchKeyword();
  getData();
};

const tapDelete = () => {
  stationObj.searchArr = [];
  removeSearchData();
};

// 点击事件-跳转电站地图
const tapStationMap = (item: any) => {
  console.log('tapList', item);
  setSearch({
    lat: item.location?.lat,
    lng: item.location?.lng,
  });
  uni.reLaunch({
    url: `/pages/stationMap/stationMap`,
  });
};

// 点击事件-跳转电站详情
const tapDetails = (item: any) => {
  uni.navigateTo({
    url: `/pages/stationDetails/stationDetails?id=${item.id}`,
  });
};
// #ifdef H5
const onClickLeft = () => {
  uni.navigateBack();
};
setTimeout(() => {
  const navBarEle = document.querySelector('.van-nav-bar') as HTMLElement;
  navBarEle.style.paddingTop = `${systemInfo.statusBarHeight}px`;
});
// #endif
</script>

<style lang="scss" scoped>
.search-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
}

.input-wrap {
  display: flex;
  align-items: center;
  width: calc(100% - 24px);
  height: 32px;
  padding: 12px;
  background-color: #fff;

  .input-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    padding-left: 17px;
    font-size: 12px;
    color: #545454;
    background-color: #f2f2f2;
    border-radius: 38rpx;

    input {
      width: 100%;
    }

    .placeholder {
      color: #858585;
    }

    .icon-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 46px;
      height: 32px;
    }

    .iconfont {
      font-size: 12px;
      color: #4d4d4d;
    }
  }

  .placeholder {
    color: #858585;
  }
}

.station-destination {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-title {
  display: flex;
  width: calc(100vw - 24px);
  height: 22px;
  margin: 12px 12px 6px 12px;
  font-size: 14px;
  color: #858585;
  align-self: baseline;

  .text {
    max-width: 50vw;
  }
}

.station-list {
  margin-bottom: 34px;

  .text-title {
    margin-top: 28px;
  }
}

.list-scroll {
  width: 100%;
  height: calc(100vh - 56px);
  overflow-y: scroll;
  background-color: #f2f2f2;
}

.list-wrap {
  // width: 100%;
  // height: calc(100% - 56px);
  width: 352px;
  box-sizing: border-box;
  padding: 0 9px;
  background-color: #fff;
  border-radius: 8px;

  &-item {
    padding: 9px 0;
    border-bottom: 1px solid #f2f2f2;

    &-title {
      color: #242424;
      font-size: 14px;
      font-weight: 500;
      line-height: 22px;
      flex: 1;
    }

    &-des {
      color: #5073f7;
      font-size: 12px;
      line-height: 22px;
      padding-left: 2px;
      white-space: nowrap;
    }

    &-adr {
      width: 276px;
      color: #858585;
      font-size: 12px;
      line-height: 22px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &-dis {
      color: #858585;
      font-size: 12px;
      line-height: 22px;
      white-space: nowrap;
    }

    &-noborder {
      &:last-child {
        border: none;
      }
    }
  }

  &-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  &-more {
    color: #5073f7;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    padding: 13px 0;
    display: flex;
    justify-content: center;
  }

  .icon-arrow-right {
    font-size: 13px;
    color: #5073f7;
    transform: rotate(90deg);
    margin-left: 2px;
  }

  .no-data {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 221px;

    .img {
      width: 158px;
      height: 104px;
      background-image: url($url + 'no-search.png');
      background-size: 100%;
      background-repeat: no-repeat;
    }

    .text {
      margin-top: 17px;
      font-size: 14px;
      color: #242424;
    }
  }
}

.history-wrap {
  display: flex;
  flex-direction: column;
  margin: 12px 0;

  .title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    line-height: 22px;
    font-size: 14px;
    color: #858585;

    .icon-delete {
      color: $uni-color-primary;
    }
  }

  .item-wrap {
    // display: flex;
    align-items: center;
    padding: 0 7px;
    margin-top: 13px;

    .item {
      display: inline-block;
      max-width: calc(100% - 22px);
      margin: 0 5px 10px 5px;
      padding: 0 16px;
      line-height: 30px;
      font-size: 12px;
      color: #545454;
      border: 1px solid #d4d4d4;
      box-sizing: border-box;
      border-radius: 18px;
    }
  }
}
</style>